<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>共享秒表计时器 - Page1</title>
</head>
<body>
    <h1>共享秒表计时器1</h1>
    <div>
        <button onclick="start()">开始</button>
        <button onclick="pause()">暂停</button>
        <button onclick="reset()">重置</button>
    </div>
    <div>
        <h2>秒表时间: <span id="timerDisplay">0秒</span></h2>
        <h2>当前时间: <span id="clockDisplay">00:00:00</span></h2>
    </div>

    <script>
        // 创建共享工作者
        const worker = new SharedWorker('sharedWorker.js');

        // 接收来自共享工作者的消息
        worker.port.onmessage = function(event) {
            const { type, time } = event.data;

            if (type === 'timer') {
                document.getElementById('timerDisplay').innerText = time;
            } else if (type === 'clock') {
                document.getElementById('clockDisplay').innerText = time;
            }
        };

        // 开始计时器
        function start() {
            worker.port.postMessage('start');
        }

        // 暂停计时器
        function pause() {
            worker.port.postMessage('pause');
        }

        // 重置计时器
        function reset() {
            worker.port.postMessage('reset');
        }

        // 开始与共享工作者的通信
        worker.port.start();
    </script>
</body>
</html>
